<template>
    <div style="width: 100%; height: 70vh;">
        <!-- 表格搜索 -->
        <div class="operate" style="margin-bottom: 15px;">
            <el-input v-model="searchQuery" placeholder="请输入用户名搜索" style="width: 300px; margin-right: 10px;" clearable
                @clear="clearSearch" />
        </div>

        <!-- 表格区域 -->
        <el-table :data="currentPageData" style="width: 100%">
            <el-table-column prop="name" label="用户名" show-overflow-tooltip></el-table-column>
            <el-table-column prop="role" label="角色" :tooltip-formatter="({ row }) => row.roles.join(', ')">
                <template #default="{ row }">
                    <el-tag v-for="role in row.roles" :key="role" class="tag-item" type="primary" style="margin: 1%;">
                        {{ role }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="addPermission(scope.row.id)">管理权限</el-button>
                    <el-button type="danger" size="small" @click="deleteUser(scope.row.id)">删除用户</el-button>
                </template>
            </el-table-column>
            <template #empty>暂无数据</template>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
            <el-pagination v-model:currentPage="currentPage" :page-size="pageSize" :total="total"
                layout="prev, pager, next" @current-change="handleCurrentChange" />
        </div>
    </div>

    <!-- 编辑用户对话框 -->
    <el-dialog v-model="editUserDialogVisible" title="权限管理" width="700px" align-center>
        <template #footer>
            <el-transfer v-model="selectedPermissions" :data="permissionData" :titles="['可选权限', '已选权限']"
                @change="handleTransferChange">
                <template #left-empty>
                    <span>暂无可选权限</span>
                </template>
                <template #right-empty>
                    <span>暂无已选权限</span>
                </template>
            </el-transfer>
        </template>
    </el-dialog>

    <!-- 删除用户对话框 -->
    <el-dialog v-model="deleteUserDialogVisible" title="删除用户" width="500px" align-center>
        <span>确定要删除该用户吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="deleteUserDialogVisible = false">取消</el-button>
                <el-button type="danger" @click="confirmDelete">删除</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElDialog, ElPagination, ElMessage, ElInput, ElTransfer, ElTag } from 'element-plus';

// 数据
const data = ref([
    { id: 1, name: '林林七', roles: ['超级管理员'] },
    { id: 2, name: 'Jane Doess', roles: ['无'] },
    { id: 3, name: 'John Doe', roles: ['内容管理员', '数据管理员'] },
    { id: 4, name: 'Alice', roles: ['普通用户'] },
    { id: 5, name: 'Bob', roles: ['日志管理员', '数据管理员'] },
    { id: 6, name: 'Charlie', roles: ['普通用户'] },
    { id: 7, name: 'David', roles: ['内容管理员'] },
    { id: 8, name: 'Eve', roles: ['普通用户'] },
    { id: 9, name: 'Frank', roles: ['管理员'] },
    { id: 10, name: 'Grace', roles: ['普通用户'] },
    { id: 11, name: 'Hannah', roles: ['管理员'] },
]);

const searchQuery = ref('');

// 当前页数据
const currentPageData = computed(() => {
    const filteredData = data.value.filter(item => item.name.includes(searchQuery.value));
    return filteredData.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
});

// 分页参数
const currentPage = ref(1);
const pageSize = ref(10); // 固定每页显示10条

// 总数据量
const total = computed(() => {
    const filteredData = data.value.filter(item => item.name.includes(searchQuery.value));
    return filteredData.length;
});

// 可选权限
const permissionData = ref([
    { key: 'dashboard:view', label: '查看仪表盘' },
    { key: 'user:view', label: '查看用户列表' },
    { key: 'user:edit', label: '编辑用户资料' },
    { key: 'role:view', label: '查看角色列表' },
    { key: 'content:view', label: '查看内容列表' },
    { key: 'content:edit', label: '编辑内容' },
    { key: 'data:view', label: '查看数据列表' },
    { key: 'data:detail', label: '查看数据详情' },
    { key: 'system:settings', label: '查看系统设置' },
    { key: 'system:logs', label: '查看系统日志' },
]);

// 已选择的权限（双向绑定到穿梭框）
const selectedPermissions = ref([]);

// 对话框状态
const editUserDialogVisible = ref(false);
const deleteUserDialogVisible = ref(false);

// 删除用户
const deleteUser = id => {
    console.log(`删除用户 ID: ${id}`);
    deleteUserDialogVisible.value = true;
    selectedUserId.value = id;
};

// 添加权限
const addPermission = (id) => {
    console.log(`管理权限 ID: ${id}`);
    editUserDialogVisible.value = true;
    selectedUserId.value = id;
    selectedPermissions.value = [
        'dashboard:view',
        'user:view',
        'user:edit',
        'role:view',
        'content:view',
        'content:edit',
    ];
};

// 确认删除
const confirmDelete = () => {
    deleteUserDialogVisible.value = false;
    // 进行删除逻辑
    ElMessage.success('删除成功');
};

// 选中的用户 ID
const selectedUserId = ref(null);

// 穿梭框变化时的处理
const handleTransferChange = (direction, movedKeys) => {
    if (direction === 'right') {
        ElMessage.success(`已添加权限: ${movedKeys.map(key => permissionData.value.find(p => p.key === key)?.label).join(', ')}`);
    } else {
        ElMessage.warning(`已移除权限: ${movedKeys.map(key => permissionData.value.find(p => p.key === key)?.label).join(', ')}`);
    }
};

// 清除搜索
const clearSearch = () => {
    searchQuery.value = '';
};

// 重置过滤条件
const resetFilters = () => {
    searchQuery.value = '';
    currentPage.value = 1;
};

// 分页事件处理
const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
};

// 初始化数据
</script>

<style>
.operate {
    display: flex;
    align-items: center;
}

.operate>div,
.operate>button {
    margin-left: 1%;
}

.operate>.el-input {
    width: 20%;
}

.pagination-container {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}
</style>